<div fxFlexFill fxFlex="100%" pDroppable="farm">
    <div  class="map" fxFlexFill pDroppable="farm" (onDrop)="onDrop($event)">
      <div *ngIf="isShowImg">
        <div  class="monitor-image"  [ngStyle]="{'top': mCenterX + '%' , 'left': mCenterY + '%'}"></div>
      </div>
        <div *ngFor="let item of farms let i =index" [ngSwitch]="item.farmCategory" >
            <app-farm-model pDraggable="farm"  *ngSwitchCase="'winfarm'"
                [ngStyle]='{zoom:zoom}'
                (onDragStart)="onDragStart($event,item)"
                (onDragEnd)="onDragEnd($event)"
                (dblclick)="ondblclick(item)"
                [farmName]="item?.farmName"
                [farmX]="item?.posx"
                [farmY]="item?.posy"
                [windSpeed]="item?.avgWindSpeed.value"  
                [power]="item?.totalPower.value"
                [active]="active"
                [i]="i"
                [unShowName]="item?.unShowName"        
                [ngClass]="{'on':i == active}"
                (click)="onClick(i,item)">
            </app-farm-model>
            <app-photovoltaic-model pDraggable="farm"  *ngSwitchCase="'photovoltaic'"
                [ngStyle]='{zoom:zoom}'
                (onDragStart)="onDragStart($event,item)"
                (onDragEnd)="onDragEnd($event)"
                (dblclick)="ondblclick(item)"
                [farmName]="item?.farmName"
                [farmX]="item?.posx"
                [active]="active"
                [i]="i"
                [unShowName]="item?.unShowName"
                [ngClass]="{'on':i == active}"
                (click)="onClick(i,item)"
                [farmY]="item?.posy"  >
            </app-photovoltaic-model>
        </div>
    </div>
</div>
